<template>
  <div class="login">
     <div class="content">
        <h4>登录账号</h4>
        <p>虾米 - 严选商城欢迎您</p>
        <!-- 手机号码 -->
        <my-input placeholder="手机号码" v-model="mobile" @blur="mobileFtn" :class="reMobile==0?'':reMobile==1?'success':'error'">
            <template #rule>
              {{reMobile==2?'必填':''}}
            </template>
            <template #icon>
              <i class="iconfont icon-shouji"></i>
            </template>
        </my-input>
       
       <!-- 密码 -->
        <my-input placeholder="密码" :type="showPwd?'text':'password'" v-model="pwd" :class="rePwd==0?'':rePwd==1?'success':'error'" @blur="pwdFtn">
          <template #icon>
              <van-icon :name="showPwd?'eye-o':'closed-eye'" @click="showPwd = !showPwd" />
            </template>
        </my-input>
        <button class="footBtn" @click="loginFtn">立即登录</button>
        <router-link custom to="/reset" v-slot="{ navigate }">
            <p class="foot_center" @click="navigate">忘记密码</p>
         </router-link>
         <router-link custom to="/register" v-slot="{ navigate }">
            <p class="footA" @click="navigate">还没有注册？ 立即注册</p>
         </router-link>
     </div>
    
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import myInput from '../../components/myInput.vue';
import { login } from '../../api/secendPage/index';
import { Notify } from 'vant';
import { useRouter } from 'vue-router';
export default {
  components: { myInput },
  setup() {
    const router = useRouter();
    const data = reactive({
      mobile:'',
      pwd: '',
      reMobile: 0,
      rePwd: 0,
      showPwd: false, // 是否显示密码
    })

    const mobileFtn = () => { // 手机号验证的函数
      let rule = /^1[3-9][0-9]{9}$/; // 手机号的正则
      // test 检验值是否符合正则的规则
      // console.log(rule.test(data.form.mobile));
      data.reMobile = rule.test(data.mobile)?1:2
    }

    const pwdFtn = () => { // 密码的验证函数
       let rule = /^[a-zA-Z0-9_]{6,18}$/; // 密码的正则
       data.rePwd = rule.test(data.pwd)?1:2
    }
    const loginFtn = () => {
        login({mobile:data.mobile,pwd:data.pwd}).then(res => {
            if (res.code == 0){
              localStorage.setItem('token',res.data.token);
              router.back();
              Notify({ type: 'success', message: '登录成功！' });
            } else {
               Notify(res.msg);  
            }
        })
    }
    return{
      ...toRefs(data),
      mobileFtn,
      pwdFtn,
      loginFtn
    }
  },
};
</script>
<style lang="scss" scoped>
.login{
  height: 100%;
  padding: 25px;
  box-sizing: border-box;
  .content{
    border: 1px solid #F5F5F5;
    padding: 10px 30px;
    box-sizing: border-box;
    h4{
        margin-top: 30px;
    }
    p{
        margin: 50px 0 10px;
        font-size: 15px;
        color: #909090;
    }
  }
}
.van-icon{
  font-size: 16px;
}

.footBtn{
  font-size: 16px;
  width: 210px;
  height: 42px;
  border: none;
  background: linear-gradient(90deg, #5ea6f8, #bb87f6);
  border-radius: 5px;
  color: #fff;
  margin: 20px auto;
  display: block;
}
.footA{
  text-align: center;
  color: #549ff9 !important;
  margin-top: 30px !important;
}
.foot_center{
  font-size: 12px;
  text-align: center;
  margin-top: 10px !important;
}
</style>